import React, { useState, useEffect } from 'react'
import { Table, Space, Input } from 'antd';
import axios from '../../utils/request';
import { Modal, Button } from 'antd';


export default function Live() {

    const [list, setlist] = useState([])
    useEffect(() => {
        sh()
    }, [])
    const sh = () => {
        axios.post('/api/shenghuo').then(res => {
            // console.log(res);
            setlist([...res.data.data])
        })
    }

    const shdel = (id) => {
        axios.post('/api/shdel', { id }).then(res => {
            // console.log(res);
            sh()
        })
    }

    //搜索
    const { Search } = Input;
    const onSearch = (value) => {
        axios.post('/api/shsearch', { value }).then(res => {
            setlist([...res.data.data])
        })
    }

    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            key: 'id',
            render: title => <a>{title}</a>,
        },
        {
            title: '标题',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '日期',
            dataIndex: 'date',
            key: 'date',
        },
        {
            title: '浏览/万',
            dataIndex: 'num1',
            key: 'num1',
        },
        {
            title: '人数',
            dataIndex: 'num2',
            key: 'num2',
        },
        {
            title: '操作',
            key: 'action',
            render: (record) => (
                <Space size="middle">
                    <a onClick={() => { shdel(record.id) }}>删除</a>
                    <a onClick={() => { shset(record) }}>编辑</a>
                </Space>
            ),
        },
    ];



    //添加
    const [isModalVisible, setIsModalVisible] = useState(false);

    const [show, setshow] = useState(false)
    const [title1, settitle1] = useState([])
    const [date1, setdate1] = useState([])
    const [num11, setnum11] = useState([])
    const [id1, setid1] = useState([])
    const title = (e) => {
        settitle1(e.target.value)
    }
    const date = (e) => {
        setdate1(e.target.value)
    }
    const num1 = (e) => {
        setnum11(e.target.value)
    }

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        if (show === true) {
            axios.post('/api/shset', { title1, date1, num11, id1 }).then(res => {
                // console.log(res);
                sh()
            })
        } else if (show === false) {
            axios.post('/api/shadd', { title1, date1, num11 }).then(res => {
                // console.log(res);
                sh()
            })
        }
        clear()
    };

    const handleCancel = () => {
        clear()
    };


    const shset = (record) => {
        setIsModalVisible(true)
        setshow(true)
        settitle1(record.title)
        setdate1(record.date)
        setnum11(record.num1)
        setid1(record.id)
    }

    const clear = () => {
        setIsModalVisible(false)
        settitle1('')
        setdate1('')
        setnum11('')
        setid1(0)
    }

    return (
        <div className='wrapper'>
            <div className="add">
                <Button type="primary" onClick={showModal}>
                    添加
      </Button>
                <Modal title="请输入" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                    <p>标题:<input type="text" value={title1} onChange={(e) => { title(e) }} /></p>
                    <p>日期:<input type="text" value={date1} onChange={(e) => { date(e) }} /></p>
                    <p>浏览:<input type="text" value={num11} onChange={(e) => { num1(e) }} /></p>
                </Modal>
            </div>
            <Search placeholder="请输入标题" onSearch={onSearch} style={{ width: 200 }} />
            <Table columns={columns} dataSource={list} />
        </div>
    )
}
